<template>
	<view class="content">
		<view class="head">
			<text>总进场费:￥{{detail.device_rent_total}}</text>
			<text>总租金:￥{{detail.place_fee_totle}}</text>
		</view>
		<view style="height: 88rpx;"></view>
		<view class="device-list">
			<view class="device-head">
				<text>主机</text>
				<text>
					<text>{{detail.ordeDevice.length}}</text>
					<text>台</text>
				</text>
			</view>
			<!-- 设备列表 -->
			<view class="device-item" v-for="(i,j) in detail.ordeDevice" :key="j">
				<!-- 显示主机名称，租金，图片 -->
				<view class="device-item-head" @tap="check(j)">
					<view class="photo">
						<image src="../../../../static/shop.jpg" mode=""></image>
						<text>{{i.device.device_name}}</text>
					</view>
					<view class="price">
						<text >租金</text>
						<text>{{i.device_actual_rent}}</text>
						<text :class="show1[j]?'cuIcon-unfold':'cuIcon-right'"></text>
					</view>
				</view>
				<template v-if="show1[j]">
					<!-- 进场费 -->
					<view class="device-item-body">
						<text>进场费</text>
						<text>￥{{i.place_fee}}</text>
					</view>
					<!-- 司机费用 -->
					<view class="device-item-body">
						<text>司机工资</text>
						<text>￥{{i.device_actual_rent}}</text>
					</view>
					<!-- 保修服务费 -->
					<view class="device-item-body">
						<text>保修服务费</text>
						<text>￥{{i.service_fee_totle}}</text>
					</view>
					<!-- 工程人员费用 -->
					<view class="device-item-body">
						<text>工程人员工资</text>
						<text>￥{{i.worker_wage_actual}}</text>
					</view>
					<!-- 配件 -->
					<view class="device-item-body" @tap="check1(j)">
						<text>配件数</text>
						<text>
							<text>{{i.orderDeviceSection.length}}</text>
							<text :class="show2[j]?'cuIcon-unfold':'cuIcon-right'"></text>
						</text>
					</view>
					<template v-if="show2[j]">
						<view class="device-item-body" v-for="(o,k) in i.orderDeviceSection" :key="k">
							<text>{{o.section_name}}</text>
							<text>￥{{o.actual_rent}}</text>
						</view>
					</template>
						<!-- 租金 -->
				</template>
				
			</view>
		</view>			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{},
				show1:[],
				show2:[]
			};
		},
		methods:{
			// 改变状态
			check(j){
				let arr = this.show1
				arr[j]=!arr[j]
				this.show1 = JSON.parse(JSON.stringify(arr))
			},
			check1(j){
				let arr = this.show2
				arr[j]=!arr[j]
				this.show2 = JSON.parse(JSON.stringify(arr))
			},
			// 获取收益详情
			getDtail(){
				let pages = getCurrentPages()
				let page = pages[pages.length-2]
				this.detail = page.__data__.obj
				this.detail.ordeDevice.forEach((i,j)=>{
					this.show1.push(false)
					this.show2.push(false)
					// this.detail.ordeDevice[j].isSectionShow = false
				})
			}
		},
		onLoad() {
			this.getDtail()
		}
	}
</script>

<style lang="scss" scoped>
.service-list{
	padding: 20rpx;
	margin: 20rpx;
	box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
	background-color: #FFFFFF;
	.service-head{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}
}
.head{
	position: fixed;
	left: 0;
	right: 0;
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	justify-content: space-around;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #EEEEEE;
	box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
	z-index: 100;
}
.device-list{
	margin: 20rpx;
	padding: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
	.device-head{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.device-item{
		margin-top: 20rpx;
		border-bottom: 2rpx solid #AAAAAA;
		.device-item-head{
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			line-height: 120rpx;
			border-bottom: 1rpx solid #EEEEEE;
			.photo{
				image{
					margin: 20rpx;
					width: 80rpx;
					height: 80rpx;
					vertical-align: middle;
				}
			}
			.price{
				// flex: 1;
			}
		}
		.device-item-body{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}
}
</style>
